<template>
  <div>
    <headerX></headerX>
    <div id="app" class="find">
      <div class="community find-item">
        <div @click="username?'': $router.push({name:'login'})" class="link"
          ><div class="pic">
            <img
              src="https://oss.flowerplus.cn/oss_png/2018-07-18/15318801713748.png"
              alt=""
            />
          </div>
          <div class="con">
            <h3>社区</h3>
            <p class="desc">共有80W+人参与晒花</p>
            <ul>
              <li>
                <img
                  src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo7iaClkmZxYmS7gibtuzzjUEI3ic9iaicOrf2poZ8bzxXhS2kFB8tIatAzicmmspfdjHxHU67AAU9OWEGg/132"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJmwS76u1EpbLuPVGQzCDh7rGyw6LvLDQYDJIxTreibxI8nTqCmZf4YSzdYhIdc2AsrsRrDEGSVVXQ/132"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epY5ibFBPWEggYVWvBGvod2t4yEP3yOE097DuD71wawYf1ZxT6oTMVC8miaSPrepRCwWRXw3lLJbBnw/132"
                  alt=""
                />
              </li>
              <li class="more">
                <img
                  src="https://oss.flowerplus.cn/oss_png/2018-07-26/15325732015690.png"
                  alt=""
                />
              </li>
            </ul>
            <div class="btn"><span>立即查看</span></div>
          </div></div
        >
      </div>
      <div class="curing find-item">
        <div @click="username?'': $router.push({name:'login'})" class="link"
          ><div class="pic">
            <img
              src="https://oss.flowerplus.cn/oss_png/2018-07-18/15318801717618.png"
              alt=""
            />
          </div>
          <div class="con">
            <h3>鲜花养护</h3>
            <p class="desc">鲜花之美需精心呵护</p>
            <div class="btn"><span>立即查看</span></div>
          </div></div
        >
      </div>

    </div>
    <foot></foot>
  </div>
</template>

<style lang="scss" scoped>
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
span,
dl,
dd,
dt,
strong {
  font-family: PingFangSC-Regular !important;
}
.page {
  min-height: 100%;
  background: #f4f4f4;
  padding-bottom: 50px;
}
.find-item {
  padding: 20px;
  background: #fff;
}
.find-item .link {
  display: block;
  position: relative;
}
.find-item .pic img {
  display: block;
  width: 100%;
  border: none;
}
.find-item .con {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  z-index: 10;
}
.find-item .con h3 {
  font-size: 24px;
  color: #333333;
  letter-spacing: 2px;
  line-height: 30px;
}
.find-item .con .desc {
  font-size: 12px;
  color: #666666;
  letter-spacing: 1px;
  padding: 10px 0;
  line-height: 18px;
}
.find-item .con .btn {
  text-align: left;
}
.find-item .con .btn span {
  display: inline-block;
  font-size: 12px;
  color: #333333;
  padding: 0 10px;
  height: 22px;
  line-height: 22px;
  border-radius: 2px;
  border: 1px solid #333333;
}
.community {
}
.community ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.community ul li {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 24px;
  flex: 0 0 24px;
  height: 24px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin-right: -4px;
  overflow: hidden;
}
.community ul li.more {
  border: none;
}
.community ul li img {
  display: block;
  width: 100%;
  max-height: 100%;
}
.community .con .btn {
  margin-top: 40px;
}
.curing {
  margin-top: 6px;
}
.curing .con .btn {
  margin-top: 70px;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .find-item .con .btn span {
    border: 0.5px solid #333333;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .find-item .con .btn span {
    border: 0.333333px solid #333333;
  }
}
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 10;
  background: #fff;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(178, 178, 178, 0.5);
  box-shadow: 0px 0px 8px 0px rgba(178, 178, 178, 0.5);
}
.nav-bar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.nav-bar ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}
.nav-bar ul li a {
  padding-top: 10px;
  height: 50px;
  display: block;
}
.nav-bar ul li i {
  display: block;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px 22px;
}
.nav-bar ul li:nth-child(1) i {
  background-image: url("https://oss.flowerplus.cn/oss_png/2018-07-17/15318086761893.png");
}
.nav-bar ul li:nth-child(1).active i {
  background-image: url("https://oss.flowerplus.cn/oss_png/2018-07-17/15318086768411.png");
}
.nav-bar ul li:nth-child(2) i {
  background-image: url("https://oss.flowerplus.cn/oss_png/2018-07-17/15318086769451.png");
}
.nav-bar ul li:nth-child(2).active i {
  background-image: url("https://oss.flowerplus.cn/oss_png/2018-07-17/15318086762000.png");
}
.nav-bar ul li:nth-child(3) i {
  background-image: url("https://oss.flowerplus.cn/oss_png/2018-07-17/15318086768899.png");
}
.nav-bar ul li:nth-child(3).active i {
  background-image: url("https://oss.flowerplus.cn/oss_png/2018-07-17/15318086766546.png");
}
.nav-bar ul li p {
  padding-top: 2px;
  font-size: 12px;
  color: #888888;
}
.nav-bar ul li.active p {
  font-weight: bold;
  color: #333333;
}
</style>
    <div class="find" id="app">
        <div class="community find-item">
            <a class="link" :href="_web_base+'sns_wx?s=discover'">
                <div class="pic">
                    <img src="https://oss.flowerplus.cn/oss_png/2018-07-18/15318801713748.png" alt="">
                </div>
                <div class="con">
                    <h3>社区</h3>
                    <p class="desc">共有80W+人参与晒花</p>
                    <ul>
                        <template v-for="(item,index) in avatarList">
                            <li><img :src="item.avatar" alt=""></li>
                        </template>
                        <li class="more">
                            <img src="https://oss.flowerplus.cn/oss_png/2018-07-26/15325732015690.png" alt="">
                        </li>
                    </ul>
                    <div class="btn">
                        <span>立即查看</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="curing find-item">
            <a class="link" href="/flowerconservation?s=floral">
                <div class="pic">
                    <img src="https://oss.flowerplus.cn/oss_png/2018-07-18/15318801717618.png" alt="">
                </div>
                <div class="con">
                    <h3>鲜花养护</h3>
                    <p class="desc">鲜花之美需精心呵护</p>
                    <div class="btn">
                        <span>立即查看</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="nav-bar">
            <ul>
                <li>
                    <a href="/">
                        <i></i>
                        <p>首页</p>
                    </a>
                </li>
                <li class="active">
                    <a href="/index/find_v7">
                        <i></i>
                        <p>发现</p>
                    </a>
                </li>
                <li>
                    <a :href="_web_base+'my'">
                        <i></i>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

</style> 

